import React,{useEffect,useState} from 'react'
import SeckillItem from './SeckillItem'
import {diffTimes} from '../utils/timers'
import '../assets/css/seckillList.scss'
export default function SeckillList(props) {
  const [hours,setHours]=useState(0)
  const [minuts,setMinutes]=useState(0)
  const [seconds,setSeconds]=useState(0)
  useEffect(()=>{
    setInterval(() => {
      let {hours,minuties,seconds}=diffTimes(new Date('2023/1/7'))
      setHours(hours)
      setMinutes(minuties)
      setSeconds(seconds)
    }, 1000);
  },[])
  return (
    <div style={{display:'flex'}}>
       <div className='seckillInfo'>
          <div className='item'>{hours}</div>
          <div className='item'>{minuts}</div>
          <div className='item'>{seconds}</div>
       </div>
       <div className='skillList'>
          {
              props.skillList.map(item=><SeckillItem key={item.id} {...item}></SeckillItem>)
          }
          <div className='leftBtn'>&lt;</div>
       </div>
      
        
    </div>
  )
}
